<template>
  <div>
    <el-row :gutter="20" class="home">
      <el-col :span="8">
        <el-card shadow="hover" class="user-card">
          <div class="user">
            <img :src="userImage">
            <div class="userinfo">
              <p class="name">{{ userName }}</p>
              <p class="access">系统用户</p>
            </div>
          </div>
          <div class="login-info">
            <p>上次登录时间：<span>2022-7-4</span></p>
            <p>上次登录地点：<span>山东省潍坊市</span></p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card shadow="hover">
          <div style="width:100%;height:300px" ref="chart"></div>
        </el-card>
      </el-col>
    </el-row>
  
  </div>
</template>

<script>
import * as echarts from "echarts";
import {getCountByMonth} from "@/api/mychart";

export default {
  name: "Home",
  data() {
    return {
      userName: localStorage.getItem("nickname"),
      userImage: require("../../src/assets/images/user.png"),
      myChart:null,
      option: {
        title: {
          text: '上月检测次数'
        },
        tooltip: {},
        legend: {
          data: ['次数']
        },
        xAxis: {},
        yAxis: {
          type: "value"
        },
        series: []
      }
    }
  },
  methods: {
    initCharts() {
      getCountByMonth().then(res => {
        const {data} = res;
        if (data.code === 200) {
          this.option.xAxis = data.data.xAxis;
          this.option.series = data.data.series;
          console.log(this.option)
          this.myChart = echarts.init(this.$refs.chart);
          // 绘制图表
          this.myChart.setOption(this.option);
          window.addEventListener("resize", () => {
            // 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
            this.myChart.resize();
            // 如果有多个echarts，就在这里执行多个echarts实例的resize方法,不过一般要做组件化开发，即一个.vue文件只会放置一个echarts实例
            /*
            this.myChart2.resize();
            ......
            */
          });
        }
      })
      
    }
  },
  mounted() {
    this.initCharts();
  }, beforeDestroy() {
    /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
    容易导致内存泄漏和额外CPU或GPU占用哦*/
    window.removeEventListener("resize", () => {
      this.myChart.resize();
    });
  },
}
</script>

<style lang="less" scoped>
.home {
  .user-card{
    height: 340px;
    .user {
      display: flex;
      align-items: center;
      padding-bottom: 20px;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;

      img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin-right: 40px;
      }

      &info {
        .name {
          font-size: 32px;
          margin-bottom: 10px;
        }

        .access {
          color: #999999;
        }
      }
    }
    .login-info {
      p {
        line-height: 28px;
        font-size: 14px;
        color: #999999;

        span {
          color: #666666;
          margin-left: 60px;
        }
      }
    }
  }

}
</style>
